<template>
  <div class="article-detail">
    <div class="container">
      <div class="content">
        <div class="content-title">{{ form.title }}</div>
        <div class="content-info">
          <div class="content-original">预览</div>
          <div class="content-author">{{ form.author }}</div>
          <div class="content-time">{{ formatDateTime(form.publishDate) }}</div>
        </div>
        <div class="content-html" v-html="form.contentHtml"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {getArticleDetail} from '@/api/article'
import '@/utils/rem'

export default {
  name: 'ArticleDetail',
  data() {
    return {
      product: {},
      showDetail: false,
      showSpecs: false,
      loading: false,
      contentId: this.$route.query.id || null,
      form: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      if (!this.contentId) {
        return
      }
      let data = await getArticleDetail({contentId: this.contentId})
      this.form = data.data
      console.log(this.form)
    },
    formatDateTime(inputDateTime) {
      const date = new Date(inputDateTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
      const day = String(date.getDate()).padStart(2, '0'); // 补零
      const hours = String(date.getHours()).padStart(2, '0'); // 补零
      const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零

      return `${year}年${month}月${day}日 ${hours}:${minutes}`;
    }
  }
}

</script>
<style scoped lang="scss">
.container {
  padding: 10px 14px 14px; // 原 0.2rem -> 20px, 0.28rem -> 28px
  max-width: 677px;
  margin: 0 auto;

  .content {
    .content-title {
      font-weight: bold;
      font-size: 24px; // 原 0.48rem
      line-height: 24px; // 原 0.46rem
      color: #333333;
      margin-bottom: 15px; // 原 0.28rem
    }

    .content-info {
      display: flex;
      align-items: center;
      //line-height: 40px; // 原 0.40rem
      margin-bottom: 10px; // 原 0.20rem
      font-size: 12px;
      .content-author {
        color: #333333;
        line-height: 24px;
        margin-right: 16px; // 原 0.16rem
      }

      .content-time {
        color: #999999;
      }
    }
  }

  .content-html {
    ::v-deep {
      img {
        max-width: 100% !important;
        height: auto !important;
      }

      p {
        //font-size: 26px; // 原 26rem（注意：这里可能是误写，应为 0.26rem）
        //line-height: 48px; // 原 48rem（同上）
        color: #333333;
        text-align: justify;
      }
    }
  }
}

</style>